<template>
  <div>
    <el-select
      style="width: 100%"
      v-model="innerValue"
      :multiple="multiple"
      filterable
      remote
      @change="changeHandler"
      reserve-keyword
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :loading="selectLoading"
      :disabled="disabled"
      :clearable="clearable"
    >
      <el-option
        v-for="item in options"
        :key="item[optionvalue]"
        :label="item[optionLable] + '(' + item[optionvalue] + ')'"
        :value="item[optionvalue]"
      >
      </el-option>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pageValue.limit"
        :total="total"
      >
      </el-pagination>
    </el-select>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    url: String,
    placeholder: String,
    whereName: String,
    value: [String, Number, Object, Array],
    getAllurl: String,
    optionvalue: String,
    optionLable: String,
    multiple: Boolean,
    disabled: Boolean,
    pageSize:String,
    clearable:Boolean
  },
  data() {
    return {
      selectLoading: false,
      options: [],
      innerValue: this.value,
      pageValue: {
        page: 1,
        limit: 10
      },
      total: 0,
      query: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        this.innerValue = val
      },
      deep: true
    },
    url: {
        handler() {
            this.getdata()
        },
        deep: true
    }
  },
  created() {
    if(this.pageSize){
      this.pageValue.limit = parseInt(this.pageSize)
    }
    if (this.getAllurl) {
      this.getAll()
    } else {
      this.getdata(this.query)
    }
  },
  methods: {
    changeHandler(val) {
      this.$emit('input', val)
    },
    getAll() {
      this.$http.post(this.getAllurl).then((res) => {
        this.options = res.data.data

        this.selectLoading = false
        this.$emit('getAllOptioin', this.options)
      })
    },
    handleCurrentChange(val) {
      this.$set(this.pageValue, 'page', val)
      this.getdata(this.query)
    },
    remoteMethod(query) {
      this.query = query
      this.selectLoading = true
      this.getdata(this.query)
    },
    getdata(query) {
      let a = this.whereName
      let obj = {
        ...this.pageValue
      }
      obj[a] = query
      this.$http.post(this.url, obj).then((res) => {
        if (this.url == '/app/index') {
          res.data.data.forEach((item) => {
            item.new_label = item.app_name + '(' + item.appid + ')'
          })
        }
        if (this.url == '/game/index') {
          res.data.data.forEach((item) => {
            item.new_label = item.game_name + '(' + item.id + ')'
          })
        }
        this.options = res.data.data
        this.selectLoading = false
        this.total = res.data.count
        this.$emit('getAllOptioin', this.options)
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
